<template>
  <view v-show="payIndex == 2">
  <div class="search-box">
    <icon class="search-icon" type="search" size="14" color="#b2b2b2"/>
    <input
      class="search-input"
      confirm-type="search"
      placeholder="搜索客户名称/负责人"
      placeholder-style="color: #9EA1BB;letter-spacing:2rpx;"
      @input="inputEnter"
    />
  </div>
  <div class="transverse-line row">
    <div class="in-number">共有{{refundmentDetailCount}}条记录</div>
    <div class="transverse-right align-flex">
      <view>
        <poput-time display="true" :list='saleData' :default="saleIndex" @cancel="bindPickerChangeSale"/>
      </view>
      <div class="compositor align-flex">
        <view class="fatalism align-flex fatalism-margin">
          <picker @change="bindPickerChangeMethod" :value="sortIndexMethod" :range="LongPlanInfoName">
            <view class="uni-input">排序</view>
          </picker>
          <image
            class="fatalism-dropdown"
            src="/static/achievement-reports-form/dropdown.png"
          />
        </view>
      </div>
    </div>
  </div>
  <div class="substance"  v-for="(item) in refundmentDetailData" :key="item.companyId"  @click="goCompany(item.companyId,item.dealId)">
    <div class="rubric">{{item.companyName}}</div>
    <div class="circumstance align-flex">
      <div class="circumstance-left">
        <div class="exercise-problems">
          商务负责人：
          <text class="explicit">{{item.businessPrincipal}} </text>
        </div>
        <div class="exercise-problems">
          退款方式：
          <text class="explicit"> {{item.refundMethod}}</text>
        </div>
      </div>
      <div class="circumstance-right">
        <div class="exercise-problems">
          退款金额：
          <text class="explicit"> ¥{{item.refundAmount}}</text>
        </div>
        <div class="exercise-problems">
          退款时间：
          <text class="explicit"> {{item.refundDate}}</text>
        </div>
      </div>
    </div>
  </div>
    <no-Data v-if="refundmentDetailCount==''"></no-Data>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, toRefs, nextTick } from 'vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { getRefundmentDetail } from '@/api/quick'
import dayjs from 'dayjs'
import { onLoad } from '@dcloudio/uni-app'
import user from '@/utils/user'
import { number } from '@intlify/core-base'
import { shake } from '@/utils/util'

const pageNum = ref(1)

const props = defineProps({
  // 子组件接收父组件传递过来的值
  payIndex: Number
})
// 使用父组件传递过来的值
const { payIndex } = toRefs(props)
  console.log(payIndex.value, '打印一下这个是啥')

onLoad(async () => {
  await user.waitLogin()
  const nowyear = new Date().getFullYear()
  const nowmonth = new Date().getMonth() + 1
  startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
  endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
  refundmentDetail()
  uni.$on('onReachBottomTwo', function (data) {
    console.log('onReachBottomTwo')
    getmoreTwo()
  })
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// 到达底部
const hasNextPage = ref(true)
const getmoreTwo = () => {
  if (!hasNextPage.value) {
    return
  }
  pageNum.value += 1
  refundmentDetail()
}

/* 销售记录昨天 弹窗 */
const cccc = dayjs().format('YYYY-mm', new Date())
console.log(cccc, 'cccc')

// 时间范围
const rangeTime = ref([
  new Date(new Date().getTime() - 86400000).toLocaleDateString(),
  new Date().toLocaleDateString()
])

// 保险数据  昨天、明天、本周、本月、自定义
const saleIndex = ref(3)
const saleThree = ref()
const saleFour = ref()
const sale = ref('' as string | number)
const saleData = ref(['昨天', '今天', '本周', '本月', '上月'])
  const bindPickerChangeSale = async (index: number, time: undefined | string) => {
    console.log(index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    // nextTick(() => {
    // setTimeout(() => {

    sale.value = index.time
    if (index.index === 1000) {
      saleThree.value = sale.value.substring(0, 10)
      saleFour.value = sale.value.substring(13, 23)
    } else {
      startTime.value =index.startTime
      endTime.value = index.endTime
    }
    // })
    saleIndex.value = index.index
    // }, 200)
    pageNum.value = 1
    await refundmentDetail()
  }
const startTime = ref('')
const endTime = ref('')
// 调用退款明细接口
const refundmentDetailData = ref()
const refundmentDetailCount = ref(0)
const refundmentDetail = async () => {
  if (pageNum.value === 1) {
    refundmentDetailData.value = []
    pageNum.value = 1
    hasNextPage.value = true
  }
  const result = await getRefundmentDetail({
    pageNum: pageNum.value,
    pageSize: 20,
    startTime: saleIndex.value !== 1000 ? startTime.value : saleThree.value || '',
    endTime: saleIndex.value !== 1000 ? endTime.value : saleFour.value || '',
    sortOrder: sortIndexMethod.value
  })
  console.log(result, '退款明细')
  // InsuranceDetailData.value = result.list
  refundmentDetailCount.value = result.totalCount

  console.log(result, '电子签充值明细')
  // chargeDetailData.value = result
  if (!result.hasNextPage) {
    hasNextPage.value = false
  }
  console.log(hasNextPage.value, '小起小起')
  const arr = []
  arr.push(...refundmentDetailData.value)
  arr.push(...result.list)
  refundmentDetailData.value = arr
  console.log(refundmentDetailData.value, 'longInsuranceData')
}

/* 排序 弹窗 */
const sortIndexMethod = ref(0)
const LongPlanInfoName = ref(['按退款时间倒序', '按退款时间正序'] as string[])
const bindPickerChangeMethod = async function (e: any) {
  console.log('picker发送选择改变，携带值为', e.detail.value)
  sortIndexMethod.value = e.detail.value
  pageNum.value = 1
  await refundmentDetail()
}

// input框输入事件
const inputValue = ref('')
const inputEnter = (e:any) => {
  shake(() => {
    console.log(e.detail.value, 'eeeeeany')
    inputValue.value = e.detail.value
    pageNum.value = 1
    refundmentDetail()
  }, 300)
}

const goCompany = (companyId:number, dealId:number) => {
  if (!dealId) {
  } else {
    console.log(companyId, '公司id', dealId, 'dealId')
    const company = companyId
    const deal = dealId
    uni.navigateTo({
      url: '/packageRemind/pages/pay-detail/index?id=' + company + '&dealId=' + deal
    })
  }
}
</script>

<style lang="scss" scoped>
.transverse-line {
  box-sizing: border-box;
  padding: 0 30rpx;
  color: #565868;
  font-size: $font-normal;

  .previously,
  .spectacle,
  .compositor {
    box-sizing: border-box;
    padding-left: 30rpx;
    font-weight: 400;
  }

  .in-number {
    font-weight: 400;
    color: $grey;
  }
}

/* payIndex==1 部分 */
.search-box {
  margin: 30rpx;
}

.substance {
  box-sizing: border-box;
  padding: 30rpx;
  background: #fff;
  margin: 30rpx;

  .rubric {
    font-size: $font-medium;
    font-weight: 600;
    color: $black;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f4f4f7;
  }

  .exercise-problems {
    padding-top: 30rpx;
    font-size: $font-normal;
    font-weight: 400;
    color: $grey;

    .explicit {
      color: $black;
    }
  }

  .circumstance-right {
    padding-left: 58rpx;
  }
}

.transverse-down {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
}

.pop-up {
  border-radius: 16rpx;

  .choices {
    width: 750rpx;
    height: 564rpx;
    background: #ffffff;
    opacity: 1;
    box-sizing: border-box;
    padding: 30rpx;
    border-radius: 16rpx;

    .custom-img {
      width: 36rpx;
      height: 36rpx;
    }

    .select-while {
      font-size: $font-medium;
      font-weight: bold;
      color: $black;
      padding: 30rpx;
    }
  }

  .choices-picker {
    height: 800rpx;
  }

  .sequence-time {
    padding: 20rpx 30rpx 27rpx 29rpx;
    display: flex;
    justify-content: space-between;

    .specific-blue {
      color: $blue;
    }

    .hook {
      width: 20rpx;
      height: 13rpx;
      color: $blue;
    }
  }
}

.second-popup {
  width: 750rpx;
  height: 388rpx;
  background: #ffffff;
  box-sizing: border-box;
  padding: 60rpx 60rpx 27rpx 60rpx;

  .select-spectacle {
    font-size: $font-medium;
    font-weight: bold;
    color: $black;
  }

  .status-box {
    color: #565868;
    padding-top: 50rpx;
    display: flex;
    justify-content: space-between;

    .hook {
      width: 20rpx;
      height: 13rpx;
      color: $blue;
    }
  }

  .status-box-blue {
    color: $blue;
  }
}

.third-popup {
  height: 564rpx;
}

.fatalism {
  background: none;
  border: none;
  padding: 0;
}
</style>
